<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			给子元素设置了margin-top，但最终却落实到了父元素上面
			解决方案：
			1. 父级元素设置为块状格式化上下文元素(最优推荐，不会增大父元素的宽高)
			2. 父元素设置padding-top，会增大父元素高度
			3. 父元素设置border-top，会增大父元素高度
			4. 书上说在父元素与第一个子元素之间添加内联元素进行分隔，但是并无效果(不推荐)
			
			
			给子元素设置margin-bottom，最终也落实到了父元素上面
			解决方案:
			1. 父级元素设置为块状格式化上下文元素(最优推荐，不会增大父元素的宽高)
			2. 父元素设置padding-bottom，会增大父元素高度
			3. 父元素设置border-bottom，会增大父元素高度
			4. 书上说在父元素与第一个子元素之间添加内联元素进行分隔，但是并无效果(不推荐)
			5. 父元素设置height，min-height，max-height
			*/
			*{
				margin: 0;
				padding: 0;
			}
			.container {
			    max-width: 400px;
			    height: 400px;
				background-color: #00FFFF;
				/* padding-top: 100px; */
				/* border-top: 100px solid transparent; */
				/* overflow: hidden; */
			}
			.container > h2 {
			    font-size: 90px;
			    margin-top: 100px;
			    color: #fff;
			}
		</style>
	</head>
	<body>
		<!-- 设置margin-top -->
		<div class="container">
			<!-- <span></span> -->
		    <h2>CSS世界</h2>
		</div>
		

	</body>
</html>
